import { Button } from 'antd';
import { useUserStore } from '@/stores';
import { useMainModal } from '@hdtd/components';
import { useState } from 'react';
import { waitM } from '@/utils';

enum EModalType {
  AA = 'aa',
  BB = 'bb'
}

interface IModalOpenData {
  name?: string;
  age?: number;
}
const Home = () => {
  const userStore = useUserStore();
  const [count, setCount] = useState(1);

  const query = async () => {
    await waitM(2000);
    // eslint-disable-next-line no-use-before-define
    cancel();
  };

  const [open, cancel] = useMainModal<EModalType, IModalOpenData>(
    (type, data, api) => {
      switch (type) {
        case EModalType.AA:
          query();
          api.setChildren(<div>{data.name}</div>);
          api.setProps({
            title: 'aa 模态框'
          });
          break;
        case EModalType.BB:
          // console.log(getChildrenData());
          api.setChildren(<Button onClick={() => setCount(count + 1)}>{count}++</Button>);
          api.setProps({
            title: 'bb 模态框'
          });
          break;
      }
      return {
        // destroyOnClose: true
        onOk: () => api.cancel()
      };
    },
    [count]
  );

  return (
    <div>
      Home
      <Button onClick={userStore.logout}>退出登录</Button>
      <Button onClick={() => open(EModalType.AA, { name: '张三' })}>打开aa</Button>
      <Button onClick={() => open(EModalType.BB)}>打开bb</Button>
    </div>
  );
};

export default Home;
